<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
    <title>给大宝贝的呀</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        body {
            background-color: #f5a9c1;
            font-weight: 700;
        }

        audio {
            display: none;
        }

        .input {
            margin: 100px auto;
            width: 400px;
            height: 50px;
            background-color: #f3c2d0;
            text-align: center;
            border-radius: 10px;
            border: 1px solid #ffffff;
        }

        .input input {
            width: 100%;
            height: 100%;
            border: none;
            background-color: #f3c2d0;
            outline: none;
            text-align: center;
            border-radius: 10px;
            color: #fff;
            font-size: 20px;
        }

        .input input::placeholder {
            color: #ffffff;
        }

        .keyboard {
            margin: 200px auto 0;
            width: 850px;
            height: 300px;
            border: 1px solid #fff;
            border-radius: 5px;
            text-align: center;
            background-color: #f3c2d0;
        }

        .keyboard table {
            margin: 8px auto;
            background-color: #f3c2d0;
            border-spacing: 10px;
        }

        .keyboard table tr td {
            margin: 6px;
            width: 44px;
            height: 44px;
        }

        .keyboard table tr td button {
            width: 100%;
            height: 100%;
            background-color: #f3c2d0;
            color: #ffffff;
            border: 1px solid #ffffff;
            border-radius: 2px;
            transition: background-color 0.5s ease 0s;
            outline: none;
        }

        .keyboard table tr td button:hover {
            background-color: #f5a9c1;
        }
    </style>
</head>

<body>
    <audio src="keyvoice.mp3"></audio>
    <div class="input">
        <label><input type="text" placeholder="请输入" autofocus="autofocus" onkeydown="return false"></label>
    </div>
    <div class="keyboard">
        <table>
            <tr class="row1">
                <td>
                    <button>`</button>
                </td>
                <td>
                    <button>1</button>
                </td>
                <td>
                    <button>2</button>
                </td>
                <td>
                    <button>3</button>
                </td>
                <td>
                    <button>4</button>
                </td>
                <td>
                    <button>5</button>
                </td>
                <td>
                    <button>6</button>
                </td>
                <td>
                    <button>7</button>
                </td>
                <td>
                    <button>8</button>
                </td>
                <td>
                    <button>9</button>
                </td>
                <td>
                    <button>0</button>
                </td>
                <td>
                    <button>-</button>
                </td>
                <td>
                    <button>+</button>
                </td>
                <td colspan="2">
                    <button>Backspace</button>
                </td>

            </tr>
            <tr class="row2">
                <td colspan="2">
                    <button>Tab</button>
                </td>
                <td>
                    <button>Q</button>
                </td>
                <td>
                    <button>W</button>
                </td>
                <td>
                    <button>E</button>
                </td>
                <td>
                    <button>R</button>
                </td>
                <td>
                    <button>T</button>
                </td>
                <td>
                    <button>Y</button>
                </td>
                <td>
                    <button>U</button>
                </td>
                <td>
                    <button>I</button>
                </td>
                <td>
                    <button>O</button>
                </td>
                <td>
                    <button>P</button>
                </td>
                <td>
                    <button>{</button>
                </td>
                <td>
                    <button>}</button>
                </td>
                <td>
                    <button>|</button>
                </td>
            </tr>
            <tr class="row3">
                <td colspan="2">
                    <button>Caps Lock</button>
                </td>
                <td>
                    <button>A</button>
                </td>
                <td>
                    <button>S</button>
                </td>
                <td>
                    <button>D</button>
                </td>
                <td>
                    <button>F</button>
                </td>
                <td>
                    <button>G</button>
                </td>
                <td>
                    <button>H</button>
                </td>
                <td>
                    <button>J</button>
                </td>
                <td>
                    <button>K</button>
                </td>
                <td>
                    <button>L</button>
                </td>
                <td>
                    <button>:</button>
                </td>
                <td>
                    <button>"</button>
                </td>
                <td colspan="2">
                    <button>Enter</button>
                </td>
            </tr>
            <tr class="row4">
                <td colspan="3">
                    <button>Shift</button>
                </td>
                <td>
                    <button>Z</button>
                </td>
                <td>
                    <button>X</button>
                </td>
                <td>
                    <button>C</button>
                </td>
                <td>
                    <button>V</button>
                </td>
                <td>
                    <button>B</button>
                </td>
                <td>
                    <button>N</button>
                </td>
                <td>
                    <button>M</button>
                </td>
                <td>
                    <button>&lt;</button>
                </td>
                <td>
                    <button>&gt;</button>
                </td>
                <td>
                    <button>?</button>
                </td>
                <td colspan="2">
                    <button>Shift</button>
                </td>
            </tr>
            <tr class="row5">
                <td colspan="2">
                    <button>Ctrl</button>
                </td>
                <td>
                    <button>Fn</button>
                </td>
                <td>
                    <button>Start</button>
                </td>
                <td>
                    <button>Alt</button>
                </td>
                <td colspan="5">
                    <button>Space</button>
                </td>
                <td>
                    <button>Alt</button>
                </td>
                <td>
                    <button>Txt</button>
                </td>
                <td colspan="3">
                    <button>Ctrl</button>
                </td>
            </tr>
        </table>
    </div>

    <script>
        window.onload = function () {
            alert("请尝试点击键盘");

            $("").focus(function () {
                document.activeElement.blur();
            });

            $(document).ready(function () {
                document.body.onkeydown = function (event) {
                    if (window.event) {
                        return false;
                    }
                }
            });
            function fnGetElement(strTagName) {
                return document.getElementsByTagName(strTagName);
            }

            function fnPlay() {
                fnGetElement("audio")[0].play();
            }

            function fnInput() {
                let arrButton = fnGetElement("button");
                let oInput = fnGetElement("input")[0];
                for (let i = 0; i < arrButton.length; i++) {
                    arrButton[i].onclick = function () {
                        fnPlay();
                        if (!(oInput.value)) {
                            oInput.value = "刘";
                        }

                        else if (oInput.value === "刘") {
                            oInput.value = "刘晨";
                        }

                        else if (oInput.value === "刘晨") {
                            oInput.value = "刘晨是";
                        }
                        else if (oInput.value === "刘晨是") {
                            oInput.value = "刘晨是大";
                        } 
                        else if (oInput.value === "刘晨是大") {
                            oInput.value = "刘晨是大宝";
                        }
                        else if (oInput.value === "刘晨是大宝") {
                            oInput.value = "刘晨是大宝贝";
                        }
                        else if (oInput.value === "刘晨是大宝贝") {
                            oInput.value = "刘晨是大宝贝呀";
                        }
                        else if (oInput.value === "刘晨是大宝贝呀") {
                            oInput.value = "刘晨是大宝贝呀！";
                        }
                        else {
                            alert("看起来这个键盘有些问题!")
                            oInput.value = "";
                        }
                    }
                }
            }

            fnInput();

        }
    </script>
</body>

</html>